<template>
	<div>
		<div class="search">
			<div class="header">
				<div class="left iconfont icon-fanhuipt" @click="$router.go(-1), getNavsBtnFun()"></div>

				<div class="ipt">
					<input v-model="search" type="text" placeholder="歌曲" @keyup.enter="add(), getCloudSearchFun(search)"
						style="text-align: center;" />
					<div  class="iconfont icon-x" @click="searchDel"></div>
				</div>
			</div>


			<router-link tag="div" class="center" to="">
				<!-- <div class="message"> -->
				<p>搜索</p>
				<i class="iconfont icon-sousuo" ></i>
				<!-- </div> -->
			</router-link>



			<div class="content">
				<h3 style="color: #EEEEEE;">热门搜索</h3>
				<ul>
					<li v-for="(item,index) in newlists" :key="index" 
					@click="
					  getCloudSearchFun(item.id,item.Sname)
					"
					><p>{{item.id}}.</p> {{item.Sname}}</li>
				</ul>
			</div>

			<div class="history">
				<div class="title">
					<h3 style="color: #EEEEEE;">历史记录</h3>
					<div v-show="record" class="iconfont icon-lajitong" @click="historyDelAll"></div>
				</div>

				<ul>
					<li v-show="record" v-for="(item, index) in record" :key="index">
						<p>{{ item.Sname }}</p>
						<div class="iconfont icon-x" @click="historyDel(index)"></div>
					</li>
				</ul>
			</div>

			<!-- 关键词 -->
			<!-- <div v-show="this.search" class="item">
				<ul v-if="suggestion">
					<li v-for="item in artists" :key="item.id" @click="
              getCloudSearchFun(item.name),
                (search = item.name),
                record.push(item.name)
            ">
						<div class="iconfont icon-sousuo"></div>
						<p>{{ item.name }}</p>
					</li>
					<li v-for="item in suggestion.songs" :key="item.id" @click="
              getCloudSearchFun(item.name),
                (search = item.name),
                record.push(item.name)
            ">
						<div class="iconfont icon-sousuo"></div>
						<p>{{ item.name }}</p>
					</li>
					<li v-for="item in suggestion.albums" :key="item.id" @click="
              getCloudSearchFun(item.name),
                (search = item.name),
                record.push(item.name)
            ">
						<div class="iconfont icon-sousuo"></div>
						<p>{{ item.name }}</p>
					</li>
					<li v-for="item in suggestion.playlists" :key="item.id" @click="
              getCloudSearchFun(item.name),
                (search = item.name),
                record.push(item.name)
            ">
						<div class="iconfont icon-sousuo"></div>
						<p>{{ item.name }}</p>
					</li>
				</ul>
			</div> -->

			<!-- 搜索结果 -->
			<div class="result" v-show="searchRes">
				<div>
					<ul>
						<div class="title">
							<h3>单曲</h3>
						</div>

						<li v-for="itemRes in searchRes" :key="itemRes.id">
							<div class="left" @click="played(itemRes.id, itemRes.MusicName)">
								<h4 style="color:#000">{{ itemRes.MusicName }}</h4>
								<p>
									<span>{{ itemRes.SName }} </span> 
								</p>
								<!-- <p v-show="itemRes.">{{ itemRes.alia[0] }}</p> -->
							</div>

							<div class="right">
								<div class="iconfont icon-shipin"></div>
								<div class="iconfont icon-gengduo"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getSearchlist,
		getSearchKeyword,
		getCloudSearch,
	} from "../../api/search";
	import {
		Dialog
	} from "vant";

	export default {
		data() {
			
			return {
				search: null,
				newlists:[{
					id:1,
					Sname:'不知名艺术家'
				},{
					id:2,
					Sname:'我是小力气'
				},{
					id:3,
					Sname:'陈奕迅'
				},{
					id:4,
					Sname:'沈以诚'
				},{
					id:5,
					Sname:'告五人'
				},{
					id:6,
					Sname:'郭顶'
				},{
					id:7,
					Sname:'血肉榨汁机'
				},{
					id:8,
					Sname:'wze'
				},{
					id:9,
					Sname:'Vicky宣宣'
				},{
					id:10,
					Sname:'枯木逢春'
				}],
				list: null,
				hotUpBtn: "ture",
				suggestion: {
					artists: null,
					songs: null,
					albums: null,
					playlists: null,
				},
				record: [],
				searchRes: null,
			};
		},
		methods: {
			SearchlistFun() {
				getSearchlist().then((data) => {
					console.log(data);
					this.list = data.data;
					this.hotlist = data.data.slice(0, 10); //不会修改原数组
					// console.log(this.hotlist.splice(10)); 会修改原数组
					console.log(this.hotlist);
					console.log(this.list);
				});
			},
			hotUp() {
				this.hotlist = this.list;
				this.hotUpBtn = false;
			},
			searchDel() {
				this.search = null;
				this.searchRes = null;
			},
			historyDelAll() {
				Dialog.confirm({
						// title: "",
						message: "确定清空全部历史记录？",
					})
					.then(() => {
						this.record = [];
					})
					.catch(() => {
						// on cancel
					});
			},
			historyDel(index) {
				this.record.splice(index, 1);
			},

			add() {
				this.record.push(this.search);
				console.log(this.record);
			},

			getNavsBtnFun() {
				this.$emit("getnavs-btn", true);
				this.$emit("get-style", false);
			},
			getCloudSearchFun(id1,Sname1) {
				console.log(id1,Sname1);
				 this.record.push({Sname: Sname1});
				console.log(this.record);
				//  console.log(obj);
				getCloudSearch({
					page:1,
					limit:100000,
					Sid: id1,
					id:-1
				}).then((data) => {
					console.log(data.data);
					this.searchRes = data.data
					console.log(this.searchRes);
				});
			},
			played(id, name) {
				// console.log(this.$route.query.id);
				this.$emit("get-search-all-id", name); //传递歌单id
				this.$emit("get-player-id", id);
			},
		},

		created() {
			// this.SearchlistFun();
			this.$emit("getnavs-btn", false);
			this.$emit("get-style", true);
		},
		// beforeUpdate() {},
		// computed: {},
		watch: {
			search() {
				getSearchKeyword({
					keywords: this.search
				}).then((data) => {
					console.log(data);
					this.suggestion = data.result;
				});
			},
		},
		// beforeRouteEnter(to, from, next) {
		//   getCloudSearch({keywords:this.search}).then((data) => {
		//   next((vm) => vm.getCloudSearch(data.result.songs));
		//   console.log(data);
		//   });
		// },
	};
</script>

<style lang="less">
	body {
		background-color: #0F172A;
	}

	.search {
		.header {
			padding-top: 4px;
			padding-bottom: 8px;
			background-color: #0F172A;
			height: 39px;
			line-height: 39px;
			text-align: center;
			display: flex;
			border: 3rpx solid #363942;

			.left {
				flex: 0 0 40px;
				font-size: 18px;
			}

			.ipt {
				flex: 1;
				margin-right: 15px;
				overflow: hidden;
				position: relative;

				input {
					width: 100%;
					border: 0px;
					border-bottom: 1px solid #000;
					background-color: transparent;
				}

				input::-webkit-input-placeholder {
					color: #fff;
				}

				.iconfont {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 24px;
				}
			}
		}

		.center {
			height: 35px;
			// flex: 1;
			width: 80%;
			text-align: center;
			background-color: #292D39;
			border-radius: 25px;
			overflow: hidden;
			weight: 80%;
			color: #ccc;
			position: relative;
			margin: auto;
			margin-top: 10px;
			padding-top: 12px;

			i {
				position: absolute;
				margin-top: -18px;
				left: 30px;
			}
		}

		.content {
			width: 90%;
			border-radius: 20px;
			// margin-top: 20px;
			// text-align: center;
			margin: 20px auto;
			min-height: 50px;
			background-color: #292D39;
			padding: 10px;
			box-sizing: border-box;
			color: #EEEEEE;

			h3 {
				font-size: 20px;
				font-weight: bold;
				padding: 8px 0;
			}

			ul {
				width: 100%;
				border-radius: 10px;
				// background-color: aquamarine;
				padding: 10px;
				box-sizing: border-box;
				box-shadow: 0 0px 3px 2px rgba(0, 0, 0, 0.1);
				display: flex;
				flex-wrap: wrap;

				li {
					width: 50%;
					display: flex;
					margin-bottom: 10px;

					p {
						font-size: 14px;
						padding: 0 5px;
						display: -webkit-box;
						// 3、弹性盒子排列方式：垂直排列：
						-webkit-box-orient: vertical;
						// 4、规定显示几行文本：
						-webkit-line-clamp: 1;
						// 5、溢出隐藏：
						overflow: hidden;
					}

					.nbsp {
						padding-right: 9px;
					}

					img {
						width: 100%;
						height: 10px;
					}
				}

				.btn {
					width: 100%;
					text-align: center;
					font-size: 14px;
					color: #aaa;
					padding-top: 5px;
				}

				.con {
					span {
						color: #EEEEEE;
					}

					p {
						font-weight: bold;
					}
				}
			}
		}

		.history {
			.title {
				display: flex;
				justify-content: space-between;
				margin: 0 10px;
				margin-bottom: 10px;

				h3 {
					font-size: 20px;
					text-align: center;
				}

				.iconfont {
					font-size: 30px;
				}
			}

			ul {
				li {
					display: flex;
					justify-content: space-between;
					margin: 0 10px;
					font-size: 14px;
					margin-bottom: 5px;

					.iconfont {
						font-size: 20px;
						padding-right: 5px;
						text-align: center;
					}
				}
			}
		}

		.item {
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: absolute;
			top: 40px;
			left: 0;

			ul {
				li {
					display: flex;

					.iconfont {
						flex: 0 0 40px;
						text-align: center;
						line-height: 50px;
						font-size: 23px;
					}

					p {
						flex: 1;
						padding: 15px 0;
						border-bottom: 1px solid #ccc;
					}
				}
			}
		}

		.result {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 40px;
			background-color: #0F172A;
			padding: 10px;
			box-sizing: border-box;

			ul {
				width: 100%;
				border-radius: 5px;
				background-color: #fff;
				// background-color: aquamarine;
				padding: 10px;
				box-sizing: border-box;
				box-shadow: 0 0px 3px 2px rgba(0, 0, 0, 0.1);
				display: flex;
				flex-wrap: wrap;

				.title {
					width: 100%;
					padding-bottom: 10px;
					border-bottom: 1px solid #ddd;
				}

				li {
					width: 100%;
					display: flex;
					// margin-bottom: 10px;
					border-bottom: 1px solid #ddd;
					padding: 8px 0;

					.left {
						flex: 1;
						padding: 5px;

						h3 {
							font-size: 20px;
						}

						span {
							color: rgba(49, 49, 197, 0.966);
						}

						p {
							padding: 2px 0;
							font-size: 14px;
							font-weight: 200;
							color: #aaa;
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 1;
							// 5、溢出隐藏：
							overflow: hidden;
						}
					}

					.right {
						display: flex;

						.iconfont {
							width: 30px;
							font-size: 25px;
							text-align: center;
							line-height: 60px;
						}
					}
				}

				padding-bottom: 50px;
			}
		}
	}
</style>
